<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>指令与生命周期</title>
</head>
<body>
  <div id="app">
    <h3 class="title draw" id="hid">Hello, Vue</h3>
    <!-- 没有递归创建fragment，所以这个功能暂时丢弃 -->
    <!-- <ul class="test" v-for="it in arr">
      <li>{{it}}</li>
    </ul> -->
    <!-- 所以只允许出现在第一层的mustache符号 -->
    I am in {{a}}
    <input type="text" v-model="txt">
    your text is {{txt}}
  </div>
  <script src="/xuni/bundle.js"></script>
  <script>
    // Q：不大理解，这里的 a，txt不都是在data对象里吗？
    // 怎么就绑定到 Vue 实例上的？
    const vm = new Vue({
      el: '#app',
      data: {
        a: 1,
        txt: 'yes',
        b: {
          m: {
            n: 'inner'
          }
        }
      }
      // ,watch: {
      //   txt (pre, now) {
      //     console.log('你试图改变txt', `${pre}-->${now}`)
      //   }
      // }
    })

    // 修改vm.a，来体验视图的更新
  </script>
</body>
</html>